<template>
  <div class="span-control-list" style="width: 100%;margin-left: 0!important;">
    <el-card class="box-card set-organ" style="margin: 0px; width: 100%; min-height: 99%">
      <div slot="header" class="clearfix">
        <span>商品信息管理</span>
      </div>
      <el-row>
        <div class="alert-container clearfix">
          <el-alert v-for="alert in alerts.successes" :key="alert.title"
                    v-bind:title="alert.title"
                    type="success"
                    show-icon>
          </el-alert>
          <el-alert v-for="alert in alerts.infos" :key="alert.title"
                    v-bind:title="alert.title"
                    type="info"
                    show-icon>
          </el-alert>
          <el-alert v-for="alert in alerts.warnings" :key="alert.title"
                    v-bind:title="alert.title"
                    type="warning"
                    show-icon>
          </el-alert>
          <el-alert v-for="alert in alerts.errors" :key="alert.title"
                    v-bind:title="alert.title"
                    type="error"
                    show-icon>
          </el-alert>
        </div>
      </el-row>
      <el-row>
        <!--数据表格-->
        <el-col>
          <!--新增任务按钮-->
          <down-search :selectValues="selectValues" @returnedValue="searchByCondition"></down-search>
          <div style="float: right; margin-bottom: 15px">
            <el-button type="primary" @click="addGoods()" v-permission:simple_goods_Goods_Add>新增商品</el-button>
          </div>
          <div class="table-control">
            <el-table v-loading="tableLoading" size="small" class="table-style" :data="goodss" border
                      highlight-current-row @current-change="handleCurrentChange">
              <el-table-column type="expand" fixed="left">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="list-table-expand">
                    <!--<el-form-item label="标识">-->
                      <!--<span>{{ props.row.EId }}</span>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="名称">-->
                      <!--<span>{{ props.row.name }}</span>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="商家">-->
                      <!--<span>{{ props.row.businessId }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="商家">
                      <span>{{ props.row.businessName }}</span>
                    </el-form-item>
                    <el-form-item label="商品名称">
                      <span>{{ props.row.goodsName }}</span>
                    </el-form-item>
                    <el-form-item label="商品价格">
                      <span>{{ props.row.goodsPrice }}</span>
                    </el-form-item>
                    <el-form-item label="商品原价">
                      <span>{{ props.row.standardPrice }}</span>
                    </el-form-item>
                    <el-form-item label="商品简介">
                      <span>{{ props.row.goodsIntroduction }}</span>
                    </el-form-item>
                    <el-form-item label="商品类型">
                      <span>{{ props.row.goodsTypeName }}</span>
                    </el-form-item>
                    <!--<el-form-item label="商品类型">-->
                      <!--<span>{{ props.row.goodsTypeId }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="商品库存">
                      <span>{{ props.row.inventory }}</span>
                    </el-form-item>
                    <el-form-item label="商品月售">
                      <span>{{ props.row.goodsSale }}</span>
                    </el-form-item>
                    <el-form-item label="商品状态">
                      <span>{{ props.row.goodsStatus }}</span>
                    </el-form-item>
                    <!--<el-form-item label="备注">-->
                      <!--<span>{{ props.row.remark }}</span>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="创建人">-->
                      <!--<span>{{ props.row.createId }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="创建时间">
                      <span>{{ props.row.createDatetime }}</span>
                    </el-form-item>
                    <!--<el-form-item label="修改人">-->
                      <!--<span>{{ props.row.updateId }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="修改时间">
                      <span>{{ props.row.updateDatetime }}</span>
                    </el-form-item>
                    <el-form-item label="商品图片">
                      <div v-for=" files in fileArray">
                        <img height="100px" width="100" style="text-align: center" :src="headerFile+files.attachmentAddr"/>
                      </div>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>

              <el-table-column show-overflow-tooltip align="left" prop="name" label="查看商品信息" min-width="100" fixed="left" sortable resizable show-overflow-tooltip>
              <template slot-scope="scope">
              <p v-on:click="displayGoods(goodss[scope.$index].eid)"
              style="text-decoration: underline">
              {{ goodss[scope.$index].name }}
              </p>
              </template>
              </el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="businessName" label="商家" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="goodsName" label="商品名称" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="goodsPrice" label="商品价格" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="standardPrice" label="商品原价" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="goodsIntroduction" label="商品简介" min-width="80"
                               sortable resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="goodsTypeName" label="商品类型" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="inventory" label="商品库存" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="goodsSale" label="商品月售" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="goodsStatus" label="商品状态" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <!--<el-table-column align="left" clalss="setCenter" prop="remark" label="备注" min-width="80" sortable resizable show-overflow-tooltip></el-table-column>-->

              <el-table-column label="操作" min-width="120" resizable>
                <template slot-scope="scope">
                  <div style="text-align: center">
                    <template>
                      <el-button @click="editOrganation(goodss[scope.$index].eid)" type="text" size="small"
                                 v-permission:simple_goods_Goods_Edit>编辑
                      </el-button>
                    </template>
                    <template>
                      <el-button @click="deleteGoods(goodss[scope.$index].eid)" type="text" size="small"
                                 v-permission:simple_goods_Goods_Delete><p
                        style="color: red !important;">删除</p></el-button>
                    </template>
                  </div>
                </template>

              </el-table-column>
            </el-table>

            <!--分页功能-->
            <div class="block">
              <el-pagination
                class="page-style" @size-change="changeSize" @current-change="changePage"
                background
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-alert v-for="remark in alerts.remarks" :key="remark.title"
                  v-bind:title="remark.title"
                  type="info"
                  v-bind:description="remark.content">
        </el-alert>
      </el-row>
    </el-card>
  </div>

</template>
<script>
  import {mapState} from 'vuex';
  import {GoodsService} from './GoodsService';
  import downSearch from '@/components/select/downSearch'

  export default {
    components: {downSearch},
    data() {
      return {
        fileArray: [],
        headerFile: process.env.BASE_FILE_VIEW,
        rules: {},
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        hightlight: true,
        goodss: [],
        tableLoading: false,
        alerts: {
          remarks: [{title: "功能说明", content: "TODO: 请在这里加上功能说明"},],
          successes: [], //TODO:[{title:'消息内容'},]
          infos: [],
          warnings: [],
          errors: []
        },
        selectValues: [
          // {key:"businessName",value:"商家"},
          {key: "goodsName", value: "商品名称"},
          {key: "goodsPrice", value: "商品价格"},
          {key: "standardPrice", value: "商品原价"},
          {key: "goodsIntroduction", value: "商品简介"},
          {key: "goodsTypeName", value: "商品类型"},
          {key: "inventory", value: "商品库存"},
          {key: "goodsSale", value: "商品月售"},
          {key: "goodsStatus", value: "商品状态"},
          // {key:"remark",value:"备注"},
        ],
        condition: ''

      }
    },
    created: function () {
      this.findGoodss();
      this.findFile();
    },
    methods: {

      findFile() {
        debugger
        GoodsService.downLoadFileByIDandName({id: '1', name: '111'}).then(res => {
          this.fileArray = res.data
          console.log(JSON.stringify(res.data))
        })
      },
      searchByCondition(value) {
        this.condition = value;
        this.findGoodss();
      },
      addAlert(message, title, type) {
        //type 可选的值为:remarks,successes,infos,warnings,errors
        type = type ? type : "errors";
        type = this.alerts[type] ? type : "errors";
        title = title ? title : message;
        this.alerts[type].unshift({title: title, content: message});
      },
      removeAlert(title, type) {
        //type 可选的值为:remarks,successes,infos,warnings,errors
        type = type ? type : "errors";
        type = this.alerts[type] ? type : "errors";
        for (var i = this.alerts[type].length - 1; i >= 0; i--) {
          delete this.alerts[type][i]
        }
      },
      refresh() {
        this.findGoodss();
      },
      installParms() {
        var parms = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          columnName: this.condition.columnName,
          content: this.condition.content
        }
        return parms;
      },
      findGoodss() {
        var parms = this.installParms();
        this.buttonRequestProgressStart("正在搜索,请稍后...");
        GoodsService.findGoodss(parms).then((res) => {
          this.buttonRequestProgressClose();
          this.goodss = res.data.datas;
          this.totalCount = res.data.totalCount;
        }).catch((error) => {
          this.buttonRequestProgressClose();
          this.$message({
            type: 'error',
            message: '网络繁忙，请稍候再试！'
          })
        })
      },
      displayGoods(goodsId) {
        var router = this.$router;
        router.push({path: '/simple/goods/goods/display/' + goodsId, query: {}});
      },
      deleteGoods(goodsId) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.buttonRequestProgressStart("正在删除,请稍后...");
          GoodsService.deleteGoods(goodsId).then((res) => {
            this.buttonRequestProgressClose();
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.refresh();
          }).catch((error) => {
            this.buttonRequestProgressClose();
            //error的data属性是后台传入的数据,data的extendedData存有后台传入的数据
            this.isSubmiting = false;
            this.addAlert({title: error.data.message})
            this.$message({
              type: 'error',
              message: '删除失败，,原因是：' + error.data.message
            })

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      changeSize(val) {
        this.pageSize = val;
        this.findGoodss();
      },
      changePage(val) {
        this.currentPage = val;
        this.findGoodss();
      },
      addGoods() {
        //新增商品信息
        var router = this.$router;
        router.push({path: '/simple/goods/goods/add', query: {}});
      },
      editOrganation(goodsId) {
        //编辑商品信息
        var router = this.$router;
        router.push({path: '/simple/goods/goods/edit/' + goodsId, query: {}});
      },
      handleCurrentChange(currentRow, oldCurrentRow) {
        //this.currentRow = val;
      },
    }
  }
</script>
<style scoped lang="scss">
</style>
